<ion-header>
  <ion-navbar>
    <ion-buttons (click)="gotoHomePage()" *ngIf="!navCtrl.canGoBack()">
      <button ion-button icon-only class="back-button disable-hover bar-button bar-button-ios back-button-ios bar-button-default bar-button-default-ios show-back-button">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
      <div class="name">{{device.config.customName}}</div>
      <div class="state">
        <ng-container *ngIf="(device.data.state=='connected') || (oldState=='connected' && device.data.state=='waiting')">(已连接)</ng-container>
        <ng-container *ngIf="device.data.state=='disconnected'">(未连接)</ng-container>
        <ng-container *ngIf="(device.data.state=='online') || (oldState=='online' && device.data.state=='waiting')">(在线)</ng-container>
        <ng-container *ngIf="device.data.state=='offline' ">(离线)</ng-container>
      </div>
    </ion-title>
    <ion-buttons end (click)="connectDevice() " *ngIf="!editMode && device.data.state=='disconnected' ">
      <button ion-button icon-only>
        <i class="fal fa-link "></i>
      </button>
    </ion-buttons>
    <ion-buttons end (click)="gotoSettings() " *ngIf="!editMode ">
      <button ion-button icon-only>
        <i class="fal fa-cog "></i>
      </button>
    </ion-buttons>
    <ion-buttons end (click)="unlock() " *ngIf="!editMode ">
      <button ion-button icon-only>
        <i class="fal fa-edit "></i>
      </button>
    </ion-buttons>
    <ion-buttons end (click)="showclearLayoutConfirm() " *ngIf="editMode ">
      <button ion-button icon-only>
        <i class="fal fa-trash-alt "></i>
      </button>
    </ion-buttons>
    <ion-buttons end (click)="lock() " *ngIf="editMode ">
      <button ion-button icon-only>
        <i class="fal fa-lock "></i>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content no-bounce>
  <!-- <div (click)="test()">test</div> -->
  <div #gridsterBox class="l2 ">
    <gridster [options]="options ">
      <gridster-item [item]="item " *ngFor="let item of dashboard " [ngClass]="{ 'animated fadeIn':editMode} ">
        <ndc-dynamic [ngComponentOutlet]="componentList[item.type] " [ndcDynamicInputs]="item " [ndcDynamicOutputs]="outputs "></ndc-dynamic>
        <div *ngIf="editMode && !dragging " class="edit " (tap)="editComponent(item) "></div>
      </gridster-item>
    </gridster>
  </div>
</ion-content>
<div class="animated slideInUp layout-bar " *ngIf="editMode ">
  <div class="h-line "></div>
  <ion-scroll class="scrollHeight " scrollX="true ">
    <div class="buttonGroupBox ">
      <div *ngFor="let button of buttonList ">
        <div class="bar-item " *ngIf="!((button.key=='joy' && device.config.mode=='mqtt' ) || (button.key=='deb' && hasDebug)||(button.key=='tim'
        && hasTiming)) "
          (click)="addComponent(button.key) ">
          <div class="btn ">
            <i class="{{button.icon}} "></i>
          </div>
          <div class="name ">{{button.name}}</div>
        </div>
      </div>
    </div>
  </ion-scroll>
</div>